<div id="header">
	<h1><a href="$BaseHref">$SiteConfig.Title</a></h1>	
	<a id="menu-trigger" href="#"><i class="fa fa-bars"></i></a>	
</div>

<div id="user-nav">
    <ul class="btn-group">
    	<% if $CurrentMember %>
    	<li class="btn visible-md-block visible-lg-block"><a title="<%t Header.ss.CLICK_PERSONAL_DETAILS "Click here view your personal details" %>" href="$MemberDetailsLink"><% if $CurrentMember.Gender == 'Male' %><i class="fa fa-male"></i><% else %><i class="fa fa-female"></i><% end_if %> <span class="text">$CurrentMember.Name ($CurrentMember.Username)</span></a></li>
    	<li class="btn dropdown" id="menu-announcement"><a href="javascript: void(0);" data-toggle="dropdown" data-target="#menu-announcement" class="dropdown-toggle"><i class="fa fa-bullhorn"></i> <span class="text"><%t Header.ss.ANNOUNCEMENT "Announcement" %></span> <span class="label label-danger">$TotalUnreadAnnouncement</span> <b class="caret"></b></a>
            <ul class="dropdown-menu announcement-menu">
                <li class="title"><i class="fa fa-bullhorn"></i><%t Header.ss.ANNOUNCEMENT "Announcement" %><a class="title-btn" href="$AnnouncementLink" title="<%t Header.ss.VIEW_ANNOUNCEMENT "View latest announcement" %>"><i class="fa fa-share"></i></a></li>
                <% if $UnreadAnnouncements(3) %>
	                <% loop $UnreadAnnouncements(3) %>
		                <li class="announcement-item">
		                	<a href="$Link">
		                        <div class="announcement-content">
		                        	<span class="announcement-time">
		                                $PublishDate.Ago
		                            </span>
		                            <span class="announcement-title">
		                                $Title
		                            </span>
		                            <span class="announcement">
		                                $Content.ContextSummary(200)
		                            </span>
		                        </div>
		                	</a>
		                </li>
	                <% end_loop %>
				<% else %>
					<li class="announcement-item">
	                	<a href="javascript: void(0)">
	                        <div class="announcement-content">
	                            <span class="announcement">
	                                <%t Header.ss.NO_ANNOUNCEMENT "No announcement at this moment" %>
	                            </span>
	                        </div>
	                	</a>
	                </li>
				<% end_if %>
            </ul>
        </li>
        <li class="btn dropdown" id="menu-ewallet"><a href="javascript: void(0);" data-toggle="dropdown" data-target="#menu-ewallet" class="dropdown-toggle"><i class="fa fa-money"></i> <span class="text"><%t Header.ss.MY_EWALLET "My EWallet" %></span> <b class="caret"></b></a>
            <ul class="dropdown-menu ewallet-menu">
                <li class="title"><i class="fa fa-money"></i><%t Header.ss.MY_EWALLET "My EWallet" %></li>
                <li class="ewallet-item">
					<div class="ewallet-content">
						<p><%t Header.ss.PURCHASE_ACCOUNT "E-Purchase Account: {balance}" balance=$CurrentMember.PurchaseAccountBalance.Nice %></p>
					</div>
                </li>
                <li class="ewallet-item">
                	<div class="ewallet-content">
                		<p><%t Header.ss.CASH_ACCOUNT "E-Cash Account: {balance}" balance=$CurrentMember.CashAccountBalance.Nice %></p>
                	</div>
                </li>
                <li class="ewallet-item">
					<div class="ewallet-content">
						<p><%t Header.ss.BONUS_ACCOUNT "E-Bonus Account: {balance}" balance=$CurrentMember.BonusAccountBalance.Nice %></p>
						<ul class="list-inline">
							<li><a href="$BonusTransferCashLink" title="<%t Header.ss.BALANCE_TRANSFER "Balance Transfer" %>"><%t Header.ss.BALANCE_TRANSFER "Balance Transfer" %></a></li>
							<li><a href="$BonusWithdrawalLink" title="<%t Header.ss.WITHDRAWAL_REQUEST "Withdrawal Request" %>"><%t Header.ss.WITHDRAWAL_REQUEST "Withdrawal Request" %></a></li>
						</ul>
					</div>
                </li>
                <li class="ewallet-item">
                	<div class="ewallet-content">
                		<p><%t Header.ss.PRODUCT_ACCOUNT "E-Product Account: {balance}" balance=$CurrentMember.ProductAccountBalance.Nice %></p>
                	</div>
                </li>
                <li class="ewallet-item">
                	<div class="ewallet-content">
                		<p><%t Header.ss.UPGRADE_ACCOUNT "E-Upgrade Account: {balance}" balance=$CurrentMember.UpgradeAccountBalance.Nice %></p>
                	</div>
                </li>
                <li class="ewallet-item">
                	<div class="ewallet-content">
                		<p><%t Header.ss.TRADE_COIN_ACCOUNT "Trade-Coin Account: {balance}" balance=$CurrentMember.TradeCoinAccountBalance.Nice %></p>
                	</div>
                </li>
            </ul>
        </li>
        <li class="btn dropdown" id="menu-language"><a href="javascript: void(0);" data-toggle="dropdown" data-target="#menu-language" class="dropdown-toggle"><i class="fa fa-language"></i> <span class="text"><%t Header.ss.LANGUAGE "Language" %></span> <b class="caret"></b></a>
            <ul class="dropdown-menu language-menu">
                <li class="title"><i class="fa fa-language"></i><%t Header.ss.LANGUAGE "Language" %></li>
                <li class="language-item">
                	<div class="language-content">
                		<a href="javascript: void(0);" class="language" data-locale="en_US"><%t Header.ss.ENGLISH "English" %></a>
                	</div>
                </li>
                <li class="language-item">
					<div class="language-content">
						<a href="javascript: void(0);" class="language" data-locale="zh_CN"><%t Header.ss.CHINESE "Chinese" %></a>
					</div>
                </li>
            </ul>
        </li>
        <li class="btn"><a title="<%t Header.ss.CLICK_MEMBER_LOGOUT "Click here signout your account" %>" href="Security/logout"><i class="fa fa-sign-out"></i> <span class="text"><%t Header.ss.MEMBER_LOGOUT "Sign Out" %></span></a></li>
        <% else %>
        	<li class="btn dropdown" id="menu-language"><a href="javascript: void(0);" data-toggle="dropdown" data-target="#menu-language" class="dropdown-toggle"><i class="fa fa-language"></i> <span class="text"><%t Header.ss.LANGUAGE "Language" %></span> <b class="caret"></b></a>
	            <ul class="dropdown-menu language-menu">
	                <li class="title"><i class="fa fa-language"></i><%t Header.ss.LANGUAGE "Language" %></li>
	                <li class="language-item">
	                	<div class="language-content">
	                		<a href="javascript: void(0);" class="language" data-locale="en_US"><%t Header.ss.ENGLISH "English" %></a>
	                	</div>
	                </li>
	                <li class="language-item">
						<div class="language-content">
							<a href="javascript: void(0);" class="language" data-locale="zh_CN"><%t Header.ss.CHINESE "Chinese" %></a>
						</div>
	                </li>
	            </ul>
	        </li>
        	<li class="btn"><a title="<%t Header.ss.CLICK_MEMBER_LOGIN "Click here signin to member area" %>" href="member/login?BackURL="><i class="fa fa-sign-in"></i> <span class="text"><%t Header.ss.MEMBER_LOGIN "Member Sign In" %></span></a></li>
        <% end_if %>
    </ul>
</div>